<template>
	<view>
		<input v-model="url" placeholder="请输入URL" maxlength="-1" />
		<button @click="parseUrl">解析</button>
		<view v-if="percentageQualityLevel5">
			<text>{{ percentageQualityLevel5 }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		getHistory,
	} from './api.js'

	const url = ref(
		'https://aki-gm-resources.aki-game.com/aki/gacha/index.html#/record?svr_id=76402e5b20be2c39f095a152090afddc&player_id=107905655&lang=zh-Hans&gacha_id=100001&gacha_type=1&svr_area=cn&record_id=46d2c011c57ada3a15496b6ede299401&resources_id=5c13a63f85465e9fcc0f24d6efb15083'
	);
	const roleUp = ref(''); //角色精准调谐数据
	const role = ref('');
	const percentageQualityLevel5 = ref('');

	function extractParamsFromUrl(url) {
		// 获取问号后面的部分
		const queryString = url.split('?')[1];

		// 解析成对象
		const params = {};
		queryString.split('&').forEach(param => {
			const [key, value] = param.split('=');
			switch (key) {
				case 'resources_id':
					params['cardPoolId'] = decodeURIComponent(value);
					break;
				case 'gacha_type':
					params['cardPoolType'] = decodeURIComponent(value);
					break;
				case 'lang':
					params['languageCode'] = decodeURIComponent(value);
					break;
				case 'player_id':
					params['playerId'] = decodeURIComponent(value);
					break;
				case 'record_id':
					params['recordId'] = decodeURIComponent(value);
					break;
				case 'svr_id':
					params['serverId'] = decodeURIComponent(value);
					break;
				default:
					// Ignore other keys
					break;
			}
		});

		return params;
	}


	const parseUrl = async () => {

		const extractedParams = extractParamsFromUrl(url.value);
		try {
			getHistory(extractedParams).then((res) => {
				if (res.data) {
					roleUp.value = res.data;
					const qualityLevel5Count = roleUp.value.filter(card => card.qualityLevel === 5).length;
					const totalRoleUp = roleUp.value.length;
					percentageQualityLevel5.value = (qualityLevel5Count / totalRoleUp) * 100;
					console.log("percentageQualityLevel5", percentageQualityLevel5);
					// 按照 time 升序对数据进行排序
					roleUp.value.sort((a, b) => {
						const dateA = new Date(a.time.replace(/-/g, '/'));
						const dateB = new Date(b.time.replace(/-/g, '/'));
						return dateA - dateB;
					});

					// 初始化空数组来存储间隔值和最后一个后面的数据个数
					let gapArray = []; //出金次数
					let temporaryIndex = ref(0);
					for (let i = 0; i < roleUp.value.length; i++) {
						if (roleUp.value[i].qualityLevel === 5) {
							temporaryIndex = i + 1 - temporaryIndex
							gapArray.push(gap); // 将间隔值添加到数组中
							// 重置计数
							previousQualityLevel5Index = i;
						} else {
						}
					}
					// 输出间隔值数组和最后一个后面的数据个数
					console.log(gapArray);
				} else {
					return
				}
			})

			// 在这里处理返回数据，根据您的需求解析接口返回的数据
		} catch (error) {
			console.error(error);
		}
	};
</script>